<template>
	<view>
		<view class="addressBox" v-if="address.name">
			<view class="addresCont" @click="toAddres">
				<view class="addresIcon">
					<image class="contIcon" src="../../static/images/work/address.png"></image>
				</view>
				<view class="contInfoBox" v-if="address.name">
					<view class="infoTop">
						<text>{{address.name}}</text><text style="margin-left: 20rpx;">{{address.mobile}}</text>
					</view>
					<view class="infoBom">
						地址:{{address.areaName}} {{address.detailAddress}}
					</view>
				</view>
				<view v-else>
					请选择地址
				</view>
			</view>
		</view>
		<view class="noAdderss" v-else @click="toAddres">
			请选择地址
		</view>
		<view class="goodsBox">
			<view class="title">
				萨堡啤酒
			</view>
			<view class="goodLi" v-for="(item,index) in goods" :key="index">
				<image class="goodLiImg" :src="item.specs.picUrl"></image>
				<view class="goodInfoBox">
					<view class="goodTitleBox">
						<view class="goodTi">
							{{item.goods.name}}
						</view>
					</view>
					<view class="contIntro">
						已选：{{item.specs.name}}
					</view>
					<view class="number">
						<view class="price">
							<text style="font-size: 36rpx;">￥{{(item.specs.price/100).toFixed(2)}}</text>
						</view>
						<view class="priceNumber">
							*{{item.count}}
						</view>
					</view>
				</view>
			</view>
			<view class="prePrice">
				<view class="preBox">
					<view class="preBoxLi">
						<view class="preBoxL">
							商品总价
						</view>
						<view class="preBoxR">
							￥{{(preferPrice.price.totalPrice/100).toFixed(2)}}
						</view>
					</view>
					<view class="preBoxLi">
						<view class="preBoxL">
							会员优惠
						</view>
						<view class="preBoxR">
							￥{{(preferPrice.price.vipPrice/100).toFixed(2)}}
						</view>
					</view>
					<view class="preBoxLi">
						<view class="preBoxL">
							套餐优惠
						</view>
						<view class="preBoxR">
							￥{{(preferPrice.price.discountPrice/100).toFixed(2)}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="botton">
			<view class="bottonCont">
				<view class="botContTow">
					<text style="font-size: 20rpx;">￥</text><text>{{(preferPrice.price.payPrice/100).toFixed(2)}}</text>
				</view>
				<view class="botContTre" @click="enter">
					结算
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createOrder,
		paySubmit,
		getAddress
	} from "@/api/wine/wine.js"
	import {
		replenSettlement
	} from "@/api/replenOrder/replenOrder.js"
	import {
		weixinPay
	} from "@/api/weixinPay/weixinPay.js"
	export default {
		data() {
			return {
				items:[],
				address: {}, //地址数据
				goods:[],//商品数据
				preferPrice:{
					price:{
						discountPrice: 0,
						payPrice: 0,
						totalPrice: 0,
						vipPrice: 0,
					}
				},//优惠信息
			}
		},
		onLoad(e){
			this.items = JSON.parse(decodeURIComponent(e.items))
			this.goods = JSON.parse(decodeURIComponent(e.goods))
			this.getSettlement()
			this.getAddress()
		},
		methods: {
			//创建订单发起支付
			enter() {
				let that = this
				if(!that.address){
					uni.$u.toast('请选择地址')
					return false
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let data = {
					items: that.items,
					type: 2,
					deskNum: '',
					customerId: '',
					addressId:that.address.id
				}
				createOrder(data).then(response => {
					if (response.code == 0) {
						if(response.data.payOrderId){
							let data2 = {
								id: response.data.payOrderId,
								channelCode: "wx_lite",
								channelExtras: {
									openid: uni.getStorageSync('openid')
								}
							}
							paySubmit(data2).then(response2 => {
								if (response2.code == 0) {
									let payData = JSON.parse(response2.data.displayContent)
									weixinPay(payData).then(response3 => {
										uni.hideLoading()
										setTimeout(() => {
											that.$tab.redirectTo('/pagesA/paySucess/paySucess')
										}, 1000)
									})
								}
							})
						}else{
							that.$tab.redirectTo('/pagesA/paySucess/paySucess')
						}
					}
				})
			},
			//获得结算信息
			getSettlement(){
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let data = {
					items:that.items,
					type:2,
					customerId:''
				}
				replenSettlement(data).then(response => {
					uni.hideLoading()
					if (response.code == 0) {
						that.preferPrice = response.data
					}
				}).catch(res=>{
					// console.log(5555)
					uni.$u.toast('所选商品库存不足，请修改数量')
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1000)
				})
			},
			//获得默认地址
			getAddress() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				//TODO 客户id是写死的
				getAddress().then(response => {
					uni.hideLoading()
					if (response.code == 0) {
						that.address = response.data
					}
				})
			},
			//选择地址
			toAddres() {
				this.$tab.navigateTo('/pagesA/address/address?type=' + 1)
			},
		}
	}
</script>

<style>
	.addressBox {
		width: 690rpx;
		/* height: fit-content; */
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 20rpx;
		padding-top: 20rpx;
	}

	.addresTitle {
		width: 630rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.resTL {
		width: 150rpx;
		height: 100rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.resTR {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 28rpx;
		color: #999999;
	}

	.TrTImg {
		width: 15rpx;
		height: 25rpx;
		margin-left: 20rpx;
	}

	.addresCont {
		width: 630rpx;
		height: 120rpx;
		margin: 0 auto;
		// background-color: red;
		display: flex;
		justify-content: space-between;
	}

	.addresIcon {
		width: 50rpx;
		height: 200rpx;
		display: block;
		margin-top: 10rpx;
	}

	.contIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.contInfoBox {
		width: 630rpx;
		height: 100rpx;
		line-height: 50rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}

	.infoTop {
		width: 600rpx;
		height: 50rpx;
	}

	.infoBom {
		width: 600rpx;
		height: 50rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.noAdderss {
		width: 690rpx;
		height: 80rpx;
		font-size: 35rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx auto;
	}
	/*  */
	.goodsBox{
		width: 690rpx;
		/* height: fit-content; */
		/* height: 726rpx; */
		/* padding-bottom: 30rpx; */
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx auto;
	}
	.title{
		width: 630rpx;
		height: 100rpx;
		margin: 0 auto;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}
	.goodLi {
		width: 630rpx;
		height: 200rpx;
		/* margin-bottom: 60rpx; */
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #F1F1F1;
	}
	.goodLi:last-child{
		border: none;
	}
	.goodLiImg {
		width: 156rpx;
		height: 156rpx;
		border-radius: 20rpx;
	}
	
	.goodInfoBox {
		width: 450rpx;
		height: 150rpx;
		overflow: hidden;
	}
	
	.goodTitleBox {
		width: 450rpx;
		height: 50rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.goodTi {
		width: 320rpx;
		height: 50rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.stutas {
		width: 100rpx;
		height: 50rpx;
		text-align: end;
		font-size: 20rpx;
		color: #F16645;
	}
	
	.contIntro {
		width: 450rpx;
		height: 60rpx;
		line-height: 30rpx;
		font-size: 24rpx;
		color: #999999;
		display: -webkit-box;
		/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
		-webkit-box-orient: vertical;
		/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
		text-overflow: ellipsis;
		/* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.number {
		width: 450rpx;
		height: 40rpx;
		color: #999999;
		display: flex;
		justify-content: space-between;
	}
	.price {
		width: 300rpx;
		height: 40rpx;
		line-height: 40rpx;
	}
	
	.priceNumber {
		width: 100rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: end;
		font-size: 24rpx;
		color: #999999;
	}
	
	/* 下面是结算优惠信息 */
	.prePrice{
		width: 690rpx;
		height: fit-content;
		padding-bottom: 20rpx;
		border-top: 2rpx solid #F1F1F1;
	}
	.preBox{
		width: 690rpx;
		/* height: 80rpx; */
		line-height: 80rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
	}
	.preBoxLi{
		width: 630rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	.preBoxL{
		width: 300rpx;
		height: 80rpx;
	}
	.preBoxR{
		width: 300rpx;
		height: 80rpx;
		text-align: end;
	}
	
	/* 吸底 */
	.botton {
		width: 750rpx;
		height: 176rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
	}
	
	.bottonCont {
		margin: 0 auto;
		width: 690rpx;
		height: 126rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.botContTow{
		width: 300rpx;
		height: 56rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #E84E22;
	}
	.botContTre{
		width: 180rpx;
		height: 64rpx;
		background: #E84E22;
		border-radius: 44rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>